<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <div class="contairner">
            <div class="left">
                <span>运动,就这么简单!</span>
                <span class="sep">|</span>
                <i class="iconfont icon-shouji " style="color: white; vertical-align: bottom;"></i>
                <span>手机客户端下载</span>

            </div>
            <div class="right">
                <ul>
                    <li><a href="#">我的订单</a></li><span class="sep">|</span>
                    <li><a href="#">用户中心<i class="iconfont icon-sanjiaoxing" style="color: #ababab;"></i></a></li><span class="sep">|</span>
                    <li><a href="#">关于我们</a></li><span class="sep">|</span>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="contairner">
            <div class="head">
                <div class="logo">
                    <img src="./images/log.png" alt="" style="vertical-align: middle;">
                    <span style="font-size: 12px;">广州<i class="iconfont icon-sanjiaoxing"></i></span>
                </div>
                <div class="search">
                    <div class="type">
                        <span>羽毛球 <i class="iconfont icon-sanjiaoxing"></i></span>
                        <input type="text" placeholder="请输入场馆名称"></input>       
                    </div>
                    <div class="btn">
                        搜&nbsp;&nbsp;索
                    </div>
                </div>
            </div>
        </div>
    
        <div class="nav">
            <div class="contairner">
                <div class="nav-list">
                    <li><a href="#">场馆预定</a></li>
                    <li><a href="#">手机客户端</a></li>
                    <li><a href="#">预订流程</a></li>
                </div>
                <div class="tu">
                    <i class="iconfont icon-gerenzhongxin-gerenxinxi"></i>
                    您好!请[登录][注册]
                </div>
            </div>
        </div>
    </div>
    <div class="bannerinfo">
        <div class="contairner">
            <div class="left">
                <div class="banner">
                    <div class="bannerimg">
                        <img src="./images/IMG5.jpg" alt="">
                    </div>
                    <div class="ljiantou"><i class="iconfont icon-xiangzuojiantou" style="font-size: 30px;"></i></div>
                    <div class="rjiantou"><i class="iconfont icon-xiangyoujiantou" style="font-size: 30px;"></i></div>
                    <div class="imgindex">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </div>
                </div>
                <div class="about">
                    <img src="./images/images/趣运动首页_03.png" alt="">
                </div>
                <div class="main">
                    <div class="h">
                        <div class="navaside">
                            <div class="ml">
                                <i class="iconfont icon-yingyongAPP_o" style="font-size: 23px; color: #5c9aef;"></i>项目
                            </div>
                            <div class="mr">
                                <ul>
                                    <li>羽毛球馆</li>
                                    <li>游泳馆</li>
                                    <li>篮球馆</li>
                                    <li>网球馆</li>
                                    <li>足球馆</li>
                                    <li>壁球</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="h">
                        <div class="navaside1">
                            <div class="ml1">
                                <i class="iconfont icon-ditu_dingwei_o" style="font-size: 23px; color: #5c9aef;"></i>区域
                            </div>
                            <div class="mr1">
                                <a>不限</a>
                                <a>天河区</a>
                                <a>白云区</a>
                                <a>海珠区</a>
                                <a>荔湾区</a>
                                <a>越秀区</a>
                                <a>黄浦区</a><br>
                                <a>番禺区</a>
                                <a>花都区</a>
                                <a>增城市</a>
                                <a>从化市</a>
                                <a>萝岗区</a>
                                <a>南沙区</a>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="img">
                            <img src="./images/球馆1.png" alt="">
                        </div>
                        <div class="detail">
                            <div class="cont">
                                <h4 style="font-weight: bolder; font-size: 14px; margin-bottom: 5px;">广州体育馆</h4>
                                <p style="margin-bottom: 16px;">地址：白云区白云大道南783号广州新体育馆</p>
                                <p>层高：15m以上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地板：木地板</p>
                            </div>
                            <div class="price">
                                <p style="margin-bottom: 5px;"><span style="font-size: 14px;">优惠价</span>:<span style="font-size: 24px; color: #ff853a;">25元</span></p>
                                <p style="margin-bottom: 5px;"><del>原价:35.00元</del></p>
                                <span>立即预定</span>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="img">
                            <img src="./images/球馆1.png" alt="">
                        </div>
                        <div class="detail">
                            <div class="cont">
                                <h4 style="font-weight: bolder; font-size: 14px; margin-bottom: 5px;">广州体育馆</h4>
                                <p style="margin-bottom: 16px;">地址：白云区白云大道南783号广州新体育馆</p>
                                <p>层高：15m以上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地板：木地板</p>
                            </div>
                            <div class="price">
                                <p style="margin-bottom: 5px;"><span style="font-size: 14px;">优惠价</span>:<span style="font-size: 24px; color: #ff853a;">25元</span></p>
                                <p style="margin-bottom: 5px;"><del>原价:35.00元</del></p>
                                <span>立即预定</span>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="img">
                            <img src="./images/球馆1.png" alt="">
                        </div>
                        <div class="detail">
                            <div class="cont">
                                <h4 style="font-weight: bolder; font-size: 14px; margin-bottom: 5px;">广州体育馆</h4>
                                <p style="margin-bottom: 16px;">地址：白云区白云大道南783号广州新体育馆</p>
                                <p>层高：15m以上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地板：木地板</p>
                            </div>
                            <div class="price">
                                <p style="margin-bottom: 5px;"><span style="font-size: 14px;">优惠价</span>:<span style="font-size: 24px; color: #ff853a;">25元</span></p>
                                <p style="margin-bottom: 5px;"><del>原价:35.00元</del></p>
                                <span>立即预定</span>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="img">
                            <img src="./images/球馆1.png" alt="">
                        </div>
                        <div class="detail">
                            <div class="cont">
                                <h4 style="font-weight: bolder; font-size: 14px; margin-bottom: 5px;">广州体育馆</h4>
                                <p style="margin-bottom: 16px;">地址：白云区白云大道南783号广州新体育馆</p>
                                <p>层高：15m以上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地板：木地板</p>
                            </div>
                            <div class="price">
                                <p style="margin-bottom: 5px;"><span style="font-size: 14px;">优惠价</span>:<span style="font-size: 24px; color: #ff853a;">25元</span></p>
                                <p style="margin-bottom: 5px;"><del>原价:35.00元</del></p>
                                <span>立即预定</span>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="img">
                            <img src="./images/球馆1.png" alt="">
                        </div>
                        <div class="detail">
                            <div class="cont">
                                <h4 style="font-weight: bolder; font-size: 14px; margin-bottom: 5px;">广州体育馆</h4>
                                <p style="margin-bottom: 16px;">地址：白云区白云大道南783号广州新体育馆</p>
                                <p>层高：15m以上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地板：木地板</p>
                            </div>
                            <div class="price">
                                <p style="margin-bottom: 5px;"><span style="font-size: 14px;">优惠价</span>:<span style="font-size: 24px; color: #ff853a;">25元</span></p>
                                <p style="margin-bottom: 5px;"><del>原价:35.00元</del></p>
                                <span>立即预定</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="footnav">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-xiangzuojiantou"></i>
                                <i class="iconfont icon-xiangzuojiantou"></i>
                                上一页
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                1
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                2
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                3
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                4
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                5
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                
                                下一页
                                <i class="iconfont icon-xiangyoujiantou"></i>
                                <i class="iconfont icon-xiangyoujiantou"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="right">
                <div class="top">
                    <ul>
                        <li class="active">
                            客户端
                            <div class="lst active">
                                <img src="./images/qrcode.png" alt="">
                                <p style="font-size: 20px;">趣运动客户端</p>
                                <p style="font-size: 14px; color: #ccc">可扫描二维码下载</p>
                                <p><i class="iconfont icon-changyonglogo37" style="font-size: 40px; color: #ccc"></i>
                                <i class="iconfont icon-changyonglogo35" style="font-size: 40px; color: #ccc;"></i></p>
                            </div>
                        </li>
                        <li>微信</li>
                        <li>微博</li>
                    </ul>
                    
                </div>
                <div class="mid">
                    <div class="tj">
                        <h2 style="font-size: 18px; margin-left: 20px;">推荐球馆</h2>
                    </div>
                    <div class="bj">
                        <div class="img">
                            <img src="./images/趣运动首页_03.png" alt="">
                        </div>
                        <p style="color: #ff3b2e;">趣运动•名狮羽毛球馆</p>
                        <p>价格：￥30.00</p>

                    </div>
                    <div class="fj">
                        <div class="l">
                            <p>趣运动•新翼羽毛球馆&nbsp;</p>
                            <p>天河区科新羽毛球馆</p>
                            <p>荔湾区君雄羽毛球馆</p>
                            <p>海珠区广州创傲（纺织）体育运动场</p>
                            <p>白云区乐乐羽毛球馆</p>
                        </div>
                        <div class="r">
                            <p style="color: #525252;">天河区</p>
                            <p style="color: #525252;">天河区</p>
                            <p style="color: #525252;">荔湾区</p>
                            <p style="color: #525252;">海珠区</p>
                            <p style="color: #525252;">白云区</p>
                        </div>
                    </div>
                </div>
                <div class="bot">
                    <img src="./images/海报.png" alt="" style="margin: 17px 3px 0px 0px;">
                </div>
                
            </div>
        </div>
        
        
    </div>
    <div class="footer">
        <div class="conte">
            <div class="left">
                <ul>
                    <li>关于我们</li>
                    <li>加入我们</li>
                    <li>联系我们</li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li>预订流程</li>
    
                </ul>
                <ul>
                    <li>商家后台</li>
    
                </ul>
            </div>
            <div class="center">
                <img src="./images/qrcode.png" alt="">
                <p style="font-size: 20px;">趣运动客户端</p>
                <p style="font-size: 14px; color: #ccc">可扫描二维码下载</p>
                <p><i class="iconfont icon-changyonglogo37" style="font-size: 40px; color: #ccc"></i>
                    <i class="iconfont icon-changyonglogo35" style="font-size: 40px; color: #ccc;"></i></p>
            </div>
            <div class="right">
                <p>
                    <i class="iconfont icon-dianhua" style="font-size: 20px;"></i>4000-410-480
                </p>
                <p><i class="iconfont icon-shizhong" style="font-size: 20px;"></i>10:00-21:00</p>
                <p>周一至周六</p>
            </div>
            
        </div>
        <div class="t">
            <p style="font-size: 12px; color: #525252;;">粤ICP备14021879号-2 © 2014 趣运动 使用本网站即表示接受趣运动用户协议。</p>
            <p>
                <img src="./images/foot2.png" alt="">
                <img src="./images/foot3.png" alt="">
                <img src="./images/foot1.png" alt="">
            </p>
        </div>
    </div>
    
    </div>
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>